
<template>
  <div class="videoListCard">
    <div class="itemCard" v-for='(v ,i) in videoList' :key="v.id" @click="itemCardClick(v.id , i)">
      <div class="videoBg">
        <img :src="`${type==='singerMv' ?  v.imgurl:v.cover}?param=680y400`" alt="">
        <div class="playCount flex">
          <i class="iconfont icon-shipin"></i>{{v.playCount}}
        </div>
        <div class="videoTime" v-if="type==='singerMv'">{{v.duration}}</div>
      </div>

      <div class="videoTitle">{{v.name}}</div>
      <div class="singer" v-if="type==='mv'">{{v.artistName}}</div>
    </div>

  </div>
</template>

<script>
import { onMounted } from 'vue'
export default {
  name: 'SingerMVCard',
  components: {},
  props: {
    type: {
      type: String,
      default: 'singerMv'
    },
    videoList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  setup(p, { emit }) {
    const itemCardClick = (id, i) => {
      let type = 'mv'
      emit('itemCardClick', id, i, type)
    }

    return {
      itemCardClick
    }
  }
}
</script>

<style scoped>
.videoListCard {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 12px;
}
.itemCard {
  margin: 0 1% 20px;
  max-width: 228px;
  width: 18vw;
}
.videoBg {
  display: flex;
  align-items: center;
  position: relative;
  height: 11.6vw;
  min-height: 144px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #000;
  color: #fff;
  cursor: pointer;
}
.videoBg img {
  height: 90%;
}
.playCount {
  position: absolute;
  top: 5px;
  right: 5px;
}
.videoTime {
  position: absolute;
  bottom: 5px;
  right: 5px;
}
.videoTitle {
  padding: 0 2px;
  margin-top: 10px;
  line-height: 16px;
}
</style>